<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>档案页面</title>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/archive.css">
</head>
<body>
<div class="iframe-body">
    <div class="x-content-box">
        <!-- 人员信息 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">人员信息</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div class="headpng">
                    <div class="head-name">杨大平 <span>165456335359852</span></div>
                    <div style="float: left;">
                        <img src="../../images/archive/head.png"
                             style="border: 4px solid #D7D7D7;width: 102px; height: 129px;">
                        <div class="collect"><i class="layui-icon layui-icon-rate"></i>关注</div>
                    </div>
                    <table class="usertable">
                        <tbody>
                        <tr>
                            <td>军人证件号：</td>
                            <td>A12305+654+4+54+</td>
                            <td>衔级：</td>
                            <td>侦查员</td>
                            <td>性别：</td>
                            <td>男</td>
                            <td>体重：</td>
                            <td>73kg</td>
                        </tr>
                        <tr>
                            <td>入伍时间：</td>
                            <td>2011-03-05</td>
                            <td>职务：</td>
                            <td>侦查员</td>
                            <td>民族：</td>
                            <td>汉</td>
                            <td>身高：</td>
                            <td>168</td>
                        </tr>
                        <tr>
                            <td>政治面貌：</td>
                            <td>中共党员</td>
                            <td>联系方式：</td>
                            <td>13558331956</td>
                            <td>籍贯：</td>
                            <td>湖南衡阳</td>
                            <td>出生日期：</td>
                            <td>2015-5-25</td>
                        </tr>
                        <tr>
                            <td>学历：</td>
                            <td>本科</td>
                            <td>QQ号：</td>
                            <td>912377249</td>
                            <td>户籍地址：</td>
                            <td>湖南衡阳</td>
                            <td>婚姻状况：</td>
                            <td>已婚</td>
                        </tr>
                        <tr>
                            <td>毕业院校：</td>
                            <td></td>
                            <td>微信号：</td>
                            <td></td>
                            <td>身份证地址：</td>
                            <td>湖南衡阳</td>

                        </tr>
                        <tr>
                            <td>所属单位：</td>
                            <td colspan="3">单位单位单位单位单位单位</td>
                            <td>现居住地址：</td>
                            <td colspan="3">湖南衡阳湖南衡阳湖南衡阳湖南衡阳湖南衡阳</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 家庭成员 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">家庭成员</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div class="family-member">
                    <ul>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                        <li>
                            <img src="../../images/archive/family-head1.png" class="family-head">
                            <div class="box">
                                <div class="text">父子</div>
                            </div>
                            <span class="family-info">
                              <p class="first-p">杨启光</p>
                              <p class="second-p">籍贯：湖南</p>
                              <p class="third-p">158956169825489561</p>
                          </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 活动轨迹 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">活动轨迹</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">
                <!--写内容-->
                <div class="activity">
                    <ul>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/all.png">
                            <div class="img-title">全部
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #8cb3cb;">
                            <img src="../../images/archive/flight.png">
                            <div class="img-title">乘航班
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/plane-ticket.png">
                            <div class="img-title">机票
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #8cb3cb;">
                            <img src="../../images/archive/taketrain.png">
                            <div class="img-title">乘火车
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/internet-bar.png">
                            <div class="img-title">上网吧
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #41cab2;">
                            <img src="../../images/archive/entry-exit.png">
                            <div class="img-title">出入境
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/Cruise.png">
                            <div class="img-title">游轮
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/express.png">
                            <div class="img-title">快递
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #8cb3cb;">
                            <img src="../../images/archive/residence-card.png">
                            <div class="img-title">居住证
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/all.png">
                            <div class="img-title">住旅店
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #8cb3cb;">
                            <img src="../../images/archive/prison.png">
                            <div class="img-title">入监
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #71c296;">
                            <img src="../../images/archive/verify.png">
                            <div class="img-title">验证通
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #41cab2;">
                            <img src="../../images/archive/phone.png">
                            <div class="img-title">电话
                                <span>50</span>
                            </div>
                        </li>
                        <li style="background: #41cab2;">
                            <img src="../../images/archive/involve-case.png">
                            <div class="img-title">涉案
                                <span>50</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 交通工具 / 活动分析 -->
        <div class="layui-row x-m-top30">
            <div class="layui-col-md5 x-border-right">
                <!-- 交通工具 -->
                <div class="x-list-block x-list-block2">
                    <div class="x-block-header">
                        <span class="x-h-text">交通工具</span>
                        <span class="x-h-line"></span>
                    </div>
                    <div class="x-block-body x-block-jtgj">
                        <!--写内容-->
                        <div id="myRadar" class="myRadar"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md7">
                <!-- 活动分析 -->
                <div class="x-list-block x-list-block2">
                    <div class="x-block-header">
                        <span class="x-h-text x-m-left20">活动分析</span>
                        <span class="x-h-line"></span>
                    </div>
                    <div class="x-block-body">
                        <!--柱状图-->
                        <div id="myBar" class="myBar"></div>
                        <div class="activity-bottom">
                            <div class="activity-bottom-content">
                                <ul>
                                    <li>
                                        <div class="left-content" style="text-align: center;">
                                            <img src="../../images/archive/activity-zone.png"
                                                 style="display: inline-block;">
                                            <div class="img-tit">活动区域</div>
                                        </div>
                                        <span>
                                            <ol class="rank" type="1">
                                                <li>广州市 <span>3次</span></li>
                                                <li>北京市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                            </ol>
                                        </span>
                                    </li>
                                    <li>
                                        <div class="left-content" style="text-align: center;">
                                            <img src="../../images/archive/perm-hotel.png"
                                                 style="display: inline-block;">
                                            <div class="img-tit">常住酒店</div>
                                        </div>
                                        <span>
                                            <ol class="rank">
                                                <li>广州市 <span>3次</span></li>
                                                <li>北京市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                                <li>上海市<span>3次</span></li>
                                            </ol>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 时光轨迹 -->
        <div class="x-list-block x-list-block2 x-block-sggj">
            <div class="x-block-header">
                <span class="x-h-text">时光轨迹</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">
                <div class="x-time-axis">
                    <div class="xt-start"></div>
                    <!-- 内容块 -->
                    <div class="xt-block">
                        <div class="xt-btn">
                            2017&nbsp;<i class="layui-icon layui-icon-triangle-d"></i>
                        </div>
                        <div class="xtbs-box">
                            <div class="xt-block-sub">
                                <div class="xt-title-icon">
                                    <img src="../../images/time-axis/zhushu.png">
                                    <span class="xt-title-date">08/18</span>
                                </div>
                                <ul class="xt-content-list">
                                    <li>
                                        房号：<b class="color-348EE1">501</b>
                                    </li>
                                    <li>
                                        入住时间：<span class="color-348EE1">2018年7月10日13:21:23</span>
                                    </li>
                                    <li>
                                        地址：<b>湖南省怀化市东风长街11号</b>
                                    </li>
                                    <li>
                                        退房时间：<span class="color-348EE1">2018年7月10日13:21:28</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="xt-block-sub">
                                <div class="xt-title-icon">
                                    <img src="../../images/time-axis/zhushu.png">
                                    <span class="xt-title-date">05/16</span>
                                </div>
                                <ul class="xt-content-list">
                                    <li>
                                        房号：<b class="color-348EE1">501</b>
                                    </li>
                                    <li>
                                        入住时间：<span class="color-348EE1">2018年7月10日13:21:23</span>
                                    </li>
                                    <li>
                                        地址：<b>湖南省怀化市东风长街11号</b>
                                    </li>
                                    <li>
                                        退房时间：<span class="color-348EE1">2018年7月10日13:21:28</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="xt-block">
                        <div class="xt-btn">
                            2016&nbsp;<i class="layui-icon layui-icon-triangle-d"></i>
                        </div>
                        <div class="xtbs-box">
                            <div class="xt-block-sub">
                                <div class="xt-title-icon">
                                    <img src="../../images/time-axis/zhushu.png">
                                    <span class="xt-title-date">08/18</span>
                                </div>
                                <ul class="xt-content-list">
                                    <li>
                                        房号：<b class="color-348EE1">501</b>
                                    </li>
                                    <li>
                                        入住时间：<span class="color-348EE1">2018年7月10日13:21:23</span>
                                    </li>
                                    <li>
                                        地址：<b>湖南省怀化市东风长街11号</b>
                                    </li>
                                    <li>
                                        退房时间：<span class="color-348EE1">2018年7月10日13:21:28</span>
                                    </li>
                                    <li>
                                        退房时间：<span class="color-348EE1">2018年7月10日13:21:28</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="xt-block-sub">
                                <div class="xt-title-icon">
                                    <img src="../../images/time-axis/zhushu.png">
                                    <span class="xt-title-date">05/16</span>
                                </div>
                                <ul class="xt-content-list">
                                    <li>
                                        房号：<b class="color-348EE1">501</b>
                                    </li>
                                    <li>
                                        入住时间：<span class="color-348EE1">2018年7月10日13:21:23</span>
                                    </li>
                                    <li>
                                        地址：<b>湖南省怀化市东风长街11号</b>
                                    </li>
                                    <li>
                                        退房时间：<span class="color-348EE1">2018年7月10日13:21:28</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="xt-end">
                        END
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人履历 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">个人履历</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div style="margin-top: 36px; margin-bottom: 30px;">
                    <div class="resume-content">
                        <i class="layui-icon layui-icon-radio" style="color: #418EDC;"></i>
                        <span class="resume-title">北京军委</span><span class="resume-title" style="color: #333333;">2016~02~目前</span>
                        <i class="layui-icon layui-icon-triangle-d" style="position: absolute;"></i>
                        <div class="takeup"></div>    <!--收起样式-->
                        <div class="progress-bar">
                            <div class="content">
                                <div style="margin-left: 130px;">所属行业:<span style="color: #333333;">政府单位</span></div>
                                <div>行政级别：<span style="color: #333333;"></span></div>
                                <div>职位:<span style="color: #333333;">侦查员</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="resume-content">
                        <i class="layui-icon layui-icon-radio" style="color: #DBEAF9;"></i>
                        <span class="resume-title">北京军委</span><span class="resume-title" style="color: #333333;">2016~02~目前</span>
                        <i class="layui-icon layui-icon-triangle-d" style="position: absolute;"></i>
                        <div class="takeup"></div>    <!--收起样式-->
                        <div class="progress-bar">
                            <div class="content">
                                <div style="margin-left: 130px;">所属行业:<span style="color: #333333;">政府单位</span></div>
                                <div>行政级别：<span style="color: #333333;"></span></div>
                                <div>职位:<span style="color: #333333;">侦查员</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="resume-content">
                        <i class="layui-icon layui-icon-radio" style="color: #DBEAF9;"></i>
                        <span class="resume-title">北京军委</span><span class="resume-title" style="color: #333333;">2016~02~目前</span>
                        <i class="layui-icon layui-icon-triangle-d" style="position: absolute;"></i>
                        <div class="takeup"></div>    <!--收起样式-->
                        <div class="progress-bar">
                            <div class="content">
                                <div style="margin-left: 130px;">所属行业:<span style="color: #333333;">政府单位</span></div>
                                <div>行政级别：<span style="color: #333333;"></span></div>
                                <div>职位:<span style="color: #333333;">侦查员</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="resume-content">         <!--结束标志-->
                        <i class="end">END</i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 车辆信息 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">车辆信息</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div class="case-incident">
                    <table>
                        <thead>
                        <tr>
                            <td width="80">序号</td>
                            <td width="157px">车牌号</td>
                            <td>品牌</td>
                            <td width="80">车身颜色</td>
                            <td>车辆识别代码</td>
                            <td width="258">初次登记日期</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>AJ12035</td>
                            <td>奥迪</td>
                            <td>白色</td>
                            <td>AJ12035</td>
                            <td>2016-05-25</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 案事件信息 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">案事件信息</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div class="case-incident">
                    <table>
                        <thead>
                        <tr>
                            <td width="80">序号</td>
                            <td width="157px">案件编号</td>
                            <td width="130">案件类型</td>
                            <td>简要案情</td>
                            <td width="258">案发日期</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>AJ12035</td>
                            <td>违纪</td>
                            <td>XXX因为醉酒驾驶触犯法律法规逮捕逮捕逮捕逮捕逮捕XXX因为醉酒驾驶触犯法律法规逮捕逮捕逮捕逮捕逮捕</td>
                            <td>2016-05-25</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
        <!-- 组织信息 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">组织信息</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div class="organ-info">
                    <div class="tooltip">暂无信息</div>
                </div>
            </div>
        </div>
        <!-- 背景审查 -->
        <div class="x-list-block">
            <div class="x-block-header">
                <span class="x-h-text">背景审查</span>
                <span class="x-h-line"></span>
            </div>
            <div class="x-block-body">

                <div class="bg-review">
                    <div class="tooltip">暂无信息</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../lib/layui/layui.all.js"></script>
<script src="../../../lib/echarts/echarts.js"></script>
<script src="../../../lib/jquery-1.9.1.min.js"></script>
<script>
    (function () {
        // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
        var indicatorData = [
            {
                text: '长途汽车',
                value: 4075,
                max: 5000

            }, {
                text: '动车',
                value: 4364,
                max: 5000
            }, {
                text: '火车',
                value: 1115,
                max: 5000
            }, {
                text: '航空',
                value: 3750,
                max: 5000
            }, {
                text: '自驾',
                value: 2700,
                max: 5000
            }
        ]
        // 活动分析柱状图数据
        var barData = [
            {
                "name": "1月",
                "value": 500
            }, {
                "name": "2月",
                "value": 87.8
            }, {
                "name": "3月",
                "value": 71
            }, {
                "name": "4月",
                "value": 80
            }, {
                "name": "5月",
                "value": 66
            }, {
                "name": "6月",
                "value": 80
            }, {
                "name": "7月",
                "value": 80
            }, {
                "name": "8月",
                "value": 80
            }, {
                "name": "9月",
                "value": 80
            }, {
                "name": "10月",
                "value": 80
            }, {
                "name": "11月",
                "value": 80
            }, {
                "name": "12月",
                "value": 80
            }];

// ===========================================================
        // 图表实例对象缓存
        var echartsCache = {
            radarChart: null,
            barChart: null
        }
        var _fn = {
            // 初始化
            init: function () {
                this.switchTimeAxis();   // 时间轴切换
                this.vehicleRadar();    // 交通工具雷达图
                this.analysisBar();    // 活动分析柱状图
                this.vitae();         //个人简历点击收起放下来
            },
            // 时间轴切换
            switchTimeAxis: function () {
                $('.xt-btn').on('click', function () {
                    $(this).siblings('.xtbs-box').toggle()
                    $(this).find('layui-icon').toggleClass('rotate-icon');
                })
            },
            //个人简历点击收起放下来
            vitae: function () {
                $('.layui-icon-triangle-d').on('click', function () {
                    $(this).siblings('.progress-bar').slideToggle();
                    $(this).siblings('.takeup').toggle();
                    $(this).toggleClass('rotate-icon');
                })
            },
            // 交通工具雷达图
            vehicleRadar: function () {
                if (echartsCache.radarChart) {
                    echartsCache.radarChart.dispose()
                }
                echartsCache.radarChart = echarts.init(document.getElementById('myRadar'));
                var dataValue = [];  //提示语的各项值
                for (var i = 0; i < indicatorData.length; i++) {
                    dataValue.push(indicatorData[i].value)
                }
                var radarOption = {
                    backgroundColor: '#fff',
                    tooltip: {
                        trigger: 'axis'
                    },
                    radar: {
                        indicator: indicatorData,  //雷达图的指示器，用来指定雷达图中的多个变量（维度）
                        radius: 180,   //雷达图大小
                        splitNumber: 8,   //坐标轴的分割段数
                        name: {
                            textStyle: {     //指示器字体样式
                                color: '#333333',
                                fontSize: 16,
                                fontFamily: '微软雅黑'
                            }
                        },
                        axisLine: {   //坐标轴轴线相关设置
                            lineStyle: {
                                color: '#cccccc',
                                width: 1,

                            },
                        },
                        splitLine: {    //坐标轴在 grid 区域中的分隔线
                            lineStyle: {
                                color: ['#cccccc'],
                                width: 1
                            }
                        },
                        splitArea: {   //坐标轴在 grid 区域中的分隔区域
                            areaStyle: {
                                color: ['#fff']
                            }
                        }
                    },
                    series: [{
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        symbol: 'circle',
                        symbolSize: 5,
                        radius: '',
                        itemStyle: {
                            normal: {
                                areaStyle: {type: 'default'},
                                color: '#48D1CC',
                                borderColor: '#5ac3bd',
                                shadowColor: 'rgba(0,0,0,0.5)'
                            }
                        },
                        data: [{
                            value: dataValue,   //提示语的各项值
                            name: '投诉举报接受渠道'   //提示语标题
                        }]
                    },]
                };
                echartsCache.radarChart.setOption(radarOption);
            },
            // 活动分析柱状图
            analysisBar: function () {
                if (echartsCache.barChart) {
                    echartsCache.barChart.dispose()
                }
                echartsCache.barChart = echarts.init(document.getElementById('myBar'));
                var xData = [],    //x轴数据
                    yData = [];    //y轴数据
                var min = 0;
                barData.map(function (a, b) {
                    xData.push(a.name);
                    if (a.value === 0) {
                        yData.push(a.value + min);
                    } else {
                        yData.push(a.value);
                    }
                });
                var barOption = option = {
                    color: ['#4db8ff'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow',       // 默认为直线，可选为：'line' | 'shadow'
                            shadowStyle: {
                                color: '#f7f9fb'
                            },
                            padding: 0,
                            z: 1
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        top: '7%',
                        height: '90%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        gridIndex: 0,
                        data: xData,
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ededed'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: '#737373',
                            fontSize: 16
                        }
                    }],
                    yAxis: {
                        type: 'value',
                        gridIndex: 0,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        min: 0,
                        axisLine: {
                            lineStyle: {
                                color: '#ededed'
                            }
                        },
                        axisLabel: {
                            color: '#4db8ff',
                            formatter: '{value} ',
                            fontSize: 16
                        }
                    },
                    series: [
                        {
                            name: '合格率',
                            type: 'bar',
                            barWidth: '50%',
                            data: yData
                        }
                    ]
                };
                echartsCache.barChart.setOption(barOption);
            }
        }

        _fn.init()
        window.addEventListener('resize', function () {
            _fn.vehicleRadar();    // 交通工具雷达图
            _fn.analysisBar();    // 活动分析柱状图
        })
    })();
</script>
</body>
</html>